<template>
  <div class="role_container">
    <!-- 27.33顶部搜索输入框 -->
    <div class="search_box">
      <el-row>
        <el-col :span="21" class="left_search">
          <el-icon :size="20" color="#444545">
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </el-col>
        <!-- 27.41点击绑定重置按钮事件 -->
        <el-col :span="3" class="right_search">
          <el-button @click="cleanSearch">重置</el-button>
          <el-button type="primar2y" @click="fetch">查询搜索</el-button>
        </el-col>
      </el-row>
      <el-row class="input_search">
        <span>角色名称：</span>
        <!-- 27.35绑定输入框用户输入的 v-model -->
        <!-- <el-input autocomplete="false" placeholder="请输入角色名称" /> -->
        <!-- <el-input v-model="searchParams" autocomplete="false" placeholder="请输入角色名称" /> -->
        <!-- 27.38这里 v-model 绑定进去searchParams 的 keyword -->
        <!-- 27.40给用户输入完毕的时候，绑定 keyup.enter 回车事件，回车事件是直接调用 fetch 请求接口数据 -->
        <el-input v-model="searchParams.keyword" @keyup.enter="fetch" autocomplete="false" placeholder="请输入角色名称" />
      </el-row>
    </div>

    <!-- 27.34数据列表 添加按钮 -->
    <div class="oprations_box">
      <div class="left_search">
        <el-icon :size="20" color="#444545">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div class="right_btn">
        <el-button type="primary">
          添加
        </el-button>
      </div>
    </div>

    <!-- 27.65写 Table 表格 -->
    <div class="table_box">
      <el-table :data="list" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="adminCount" label="用户数" />
        <el-table-column prop="createTime" label="添加时间">
          <template #default="{ row }">
            {{ formateTime(row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column prop="status" label="是否启用">
          <template #default="{ row }">
            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" />
          </template>
        </el-table-column>

        <el-table-column prop="" label="操作">
          <template #default="{ row }">
            <!-- 27.66点击分配角色按钮,路由会跳转 -->
            <!-- 27.68使用链式跳转 -->
            <el-button type="primary" link @click="router.push('/ums/allocMenu?id=' + row.id)">分配角色</el-button>
            <!-- 29.9给分配资源按钮点击事件，路由跳转，传递当前的id -->
            <!-- 29.10去到 ums 文件夹里面的 allocResource.vue 文件-->
            <!-- <el-button type="primary" link>分配资源</el-button> -->
            <el-button type="primary" link @click="router.push('/ums/allocResource?id=' + row.id)">分配资源</el-button>
            <el-button type="primary" link>编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 27.64隐藏以下的代码 -->
    <!-- 27.30将数据渲染到页面上 -->
    <!-- <span v-for="item in list" :key="item.id">{{ item.name }}</span> -->

    <!-- 27.31将分页封装好的插件导入 -->
    <!-- 27.32封装好的分页，现在导入直接可以用 -->
    <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
      :total="total" />
  </div>
</template>
<script setup lang='ts'>
// 27.13 导入 hooks
import useTable from '@/hooks/useTable'
import { ApiGetRoleList } from '@/http/api'
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
import { Search, Tickets } from '@element-plus/icons-vue'
import { reactive } from 'vue'

// 导入 utils 里面格式化时间的方法
import { formateTime } from '@/utils/index'
import { useRouter } from 'vue-router'

// 27.67导入路由实例
const router = useRouter()

// 27.36定义传递到 useTable 的搜索参数
const searchParams = reactive({
  // 27.37因为 searchParams 是很多的到时候会，所以需要定义成对象
  keyword: ''
})

// 27.14调用 useTable 的 hook
// 27.15去到 network 可以看到数据请求回来的 data --- list
// 27.16去到 hooks 文件夹里面的 useTable.ts
// const { list } = useTable(ApiGetRoleList, {})
// 27.29接收其余的参数
// const { list, pageNum, pageSize, total, fetch } = useTable(ApiGetRoleList, {})
// 27.39定义了 searchParams 就把这个搜索参数传递给 useTable
const { list, pageNum, pageSize, total, fetch } = useTable(ApiGetRoleList, searchParams)

// 27.42点击重置按钮事件
const cleanSearch = () => {
  // 27.43点击的时候将关键字改为空 ''
  searchParams.keyword = ''
  // 27.44然后重新发送接口请求
  // 27.45去到 useTable.ts 文件里面
  fetch() //对外提供一个用来 手动发请求的数据
}
</script>

<style lang="less" scoped>
.search_box {
  padding: 20px;
  box-shadow: 0 0 4px 2px #eee;
  margin-bottom: 20px;
  border-radius: 2px;
  // 二十四、将搜索框部分粘性定位到顶部
  position: sticky;
  top: -20px;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.9);

  // 右边按钮
  .right_search {
    display: flex;
    align-items: center;
    justify-content: right;
  }

  .input_search {
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
      color: #606266;
      margin-left: 30px;
    }

    .el-input {
      width: 200px;
    }
  }
}


// 左边标题
.left_search {
  display: flex;
  align-items: center;


  span {
    font-size: 14px;
    color: #303133;
    margin-left: 10px;
  }
}

// 数据列表
.oprations_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  box-shadow: 0 0 4px 2px #eee;
  margin-bottom: 20px;
  border-radius: 2px;

}
</style>